<template>
  <div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">我的审批</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button type="text">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="申请人">
        <el-input
          v-model="formInline.senderName"
          placeholder="申请人"
        ></el-input>
      </el-form-item>
      <el-form-item label="申请状态">
        <el-select
          v-model="formInline.approvalStatus"
          placeholder="审批状态"
        >
          <el-option
            label="审批超时"
            value="1"
          ></el-option>
          <el-option
            label="审批通过"
            value="2"
          ></el-option>
          <el-option
            label="未审批"
            value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="aprovals"
      height="590"
    >
      <el-table-column
        prop="approvalId"
        label="审批编号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        label="审批内容"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="receiveName"
        label="审批人"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="senderName"
        label="申请人"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="审批状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag size="medium">{{ handleStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
          >详情</el-button>
          <el-button
            type="text"
            size="small"
            @click="approval(scope.row)"
          >审批</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="current"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {queryApproval} from '@/api/system/approval'
export default {
  data() {
    return {
      aprovals: [],
      pageSize: 10,
      current: 1,
      total: 0,
      formInline: {
        senderName: '',
        approvalStatus: ''
      }
    };
  },
  methods: {
    handleStatus(status) {
      var str = ''
      if (status === 2) {
        str = "已审批"
      } else if (status == 1) {
        str = "审批超时"
      } else {
        str = "未审批"
      }
      return str
    },
    async onSubmit() {
        const {senderName, approvalStatus} = this.formInline
        console.log(this.formInline)
        console.log(senderName)
        const { data:response } = await queryApproval(senderName, approvalStatus, this.current, this.pageSize)
        if (response.code === 200) {
          this.aprovals = response.data.approvals.records
          this.current = response.data.approvals.current
          this.pageSize = response.data.approvals.size
          this.total = response.data.approvals.total
        }
        if (response.code === 500) {
          this.$message.error(response.message)
        }
    }
  },
  async created() {
    const { data:response } = await queryApproval('', '', 1, 10)
    if (response.code === 200) {
      this.aprovals = response.data.approvals.records
      this.current = response.data.approvals.current
      this.pageSize = response.data.approvals.size
      this.total = response.data.approvals.total
    }
    if (response.code === 500) {
        this.$message.error(response.message)
    }
  }
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>